<template>
  <div>
    <el-tabs :value="item.category+''" type="border-card" @tab-click="chooseTabs">
      <el-tab-pane name="3">
        <span slot="label"><i class="el-icon-document"/> 文本</span>
        <el-input v-model="item.content" :rows="5" type="textarea" placeholder="请输入内容"/>
      </el-tab-pane>
      <el-tab-pane name="4" class="text-center">
        <span slot="label"><i class="el-icon-picture-outline"/> 图片</span>
        <el-image v-if="item.pictureMedia" :src="item.pictureUrl" style="width:140px;height:140px"/>
        <br><br>
        <el-button type="success" @click="openMaterialPic">从素材库选择图片</el-button>
      </el-tab-pane>
      <el-tab-pane name="5" class="text-center">
        <span slot="label"><i class="el-icon-copy-document"/> 图文</span>
        <el-card v-if="item.newsMedia" class="margin-10 news_card">
          <div class="pic_card">
            <el-image :src="item.news.cover" :fit="'none'" class="pic"/>
            <div class="title">
              <el-link :href="item.news.link" type="primary" target="_blank">{{ item.news.title }}</el-link>
            </div>
          </div>
          <div v-if="!item.news.more" class="margin-top-10" style="color:#909399;font-size:14px">{{ item.news.digest }}</div>
          <div v-for="(subItem,subIndex) in item.news.news" v-else :key="subIndex">
            <el-row class="sub_pic_card margin-top-10">
              <el-col :span="16" class="sub_pic_title">
                <div class="title">
                  <el-link :href="subItem.link" type="primary" target="_blank">{{ subItem.title }}</el-link>
                </div>
              </el-col>
              <el-col :span="8">
                <el-image :src="subItem.cover" :fit="'none'" class="pic"/>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <div class="clearfix"/>
        <el-button type="success" @click="openMaterialNews">从素材库选择文章</el-button>
      </el-tab-pane>
      <el-tab-pane name="6" class="text-center">
        <span slot="label"><i class="el-icon-microphone"/> 语音</span>
        <div class="text-center">
          <video v-if="item.voiceMedia" :src="getVoiceStreamUrl(item.voiceMedia)" controls="controls">您的浏览器不支持视频播放</video>
          <br>{{ item.voiceName }}<br><br>
          <el-button type="success" @click="openMaterialVoice">从素材库选择语音</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane name="7" class="text-center">
        <span slot="label"><i class="el-icon-video-camera"/> 视频</span>
        <div class="text-center">
          <video v-if="item.videoMedia" ref="video" :src="getVideoStreamUrl(item.videoMedia)" controls="controls">您的浏览器不支持视频播放</video>
          <br><br>
          <el-button type="success" @click="openMaterialVideo">从素材库选择视频</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-click-modal="false" :title="mp.name+' 图片素材'" :visible.sync="dialogPicVisible" width="75%">
      <mp-material-pic ref="imageComponent" :platform-id="platformId" :deleted="false" @choose="choosePic"/>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="mp.name+' 图文素材'" :visible.sync="dialogNewsVisible" width="60%">
      <mp-material-news ref="newsComponent" :platform-id="platformId" :deleted="false" @choose="chooseNews"/>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="mp.name+' 语音素材'" :visible.sync="dialogVoiceVisible" width="60%">
      <mp-material-voice ref="voiceComponent" :platform-id="platformId" :deleted="false" @choose="chooseVoice"/>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="mp.name+' 视频素材'" :visible.sync="dialogVideoVisible" width="70%">
      <mp-material-video ref="videoComponent" :platform-id="platformId" :deleted="false" @choose="chooseVideo"/>
    </el-dialog>
  </div>
</template>
<script>
import { MpMaterialService } from '@/api/WeChatService'
import MpMaterialPic from '@/views/wechat/mp_material_pic'
import MpMaterialNews from '@/views/wechat/mp_material_news'
import MpMaterialVoice from '@/views/wechat/mp_material_voice'
import MpMaterialVideo from '@/views/wechat/mp_material_video'

export default {
  name: 'WechatMpMsgTypeComponent',
  components: { MpMaterialPic, MpMaterialNews, MpMaterialVoice, MpMaterialVideo },
  props: {
    item: { type: Object, default: undefined },
    mp: { type: Object, default: undefined },
    platformId: { type: Number, default: 0 }
  },
  data() {
    return {
      dialogVoiceVisible: false, dialogPicVisible: false, dialogNewsVisible: false, dialogVideoVisible: false
    }
  },
  methods: {
    chooseTabs(tab) {
      this.item.category = parseInt(tab.name)
    },
    openMaterialPic() {
      this.dialogPicVisible = true
      this.$nextTick(() => {
        this.$refs.imageComponent.initList()
      })
    },
    openMaterialNews() {
      this.dialogNewsVisible = true
      this.$nextTick(() => {
        this.$refs.newsComponent.initList()
      })
    },
    openMaterialVoice() {
      this.dialogVoiceVisible = true
      this.$nextTick(() => {
        this.$refs.voiceComponent.initList()
      })
    },
    openMaterialVideo() {
      this.dialogVideoVisible = true
      this.$nextTick(() => {
        this.$refs.videoComponent.initList()
      })
    },
    choosePic(data) {
      this.dialogPicVisible = false
      this.item.pictureMedia = data.mediaId
      this.item.pictureUrl = data.cover
    },
    chooseNews(data) {
      this.dialogNewsVisible = false
      this.item.newsMedia = data.mediaId
      this.item.newsName = data.title
      this.item.news = data
    },
    chooseVoice(data) {
      this.dialogVoiceVisible = false
      this.item.voiceMedia = data.mediaId
      this.item.voiceName = data.fileName
    },
    chooseVideo(data) {
      this.dialogVideoVisible = false
      this.item.videoMedia = data.mediaId
      this.item.videoName = data.fileName
    },
    getVoiceStreamUrl(media) {
      const url = process.env.HOST + '/manage/wechat/mp/material/stream.do?mediaId=' + media + '&platformId=' + this.platformId
      return url
    },
    getVideoStreamUrl(media) {
      const that = this
      MpMaterialService.getVideoMaterialInfo({ mediaId: media, platformId: that.platformId }).then(result => {
        that.$refs.video.src = result
      })
    }
  }
}
</script>
<style lang="scss">
  .news_card{width:320px;padding:0px;display:inline-block;
    .pic_card {
      position: relative;
      .pic {width: 100%;height: 120px;display: block;}
      .title{position: absolute;bottom: 0;background: #0000006e;color: #ffffff;width: 100%;display: flex;align-items: center;justify-content: center;padding:10px 0;}
    }
    .sub_pic_card{
      border-bottom: 1px solid #dcdfe6;padding-bottom:5px;
      .sub_pic_title{display: table;height: 100px;}
      .pic {width: 100%;display: block;}
      .title{display: table-cell;vertical-align: middle;padding:5px;}
    }
    .el-card__body{padding:5px;} }
</style>
